<template>
  <view class="container">
    <uniPopup ref="uniPopupRef" :is-mask-click="false">
      <view class="chose-role">
        <text class="title">请选择您的身份</text>
        <text class="desc">填写记录将存在对应身份的记录列表</text>
        <view class="roles">
          <view
            v-for="(item, index) in userRoleVoList"
            :key="index"
            class="role-box"
            :class="{ 'selectd-role-box': isSelected(item.id) }"
            @click="choseRole(item.id)"
          >
            <text class="ali-icon icon-style" :class="item.logo"></text>
            <text class="name">{{ item.name }}</text>
          </view>
        </view>
        <TButton
          :customStyle="{ borderRadius: '32rpx', height: '72rpx', lineHeight: '72rpx' }"
          type="primary"
          text="确定填写身份"
          @click="handleOk"
        ></TButton>
      </view>
    </uniPopup>
  </view>
</template>
<script setup lang="ts">
  import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { ref } from 'vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import type { UserRoleVoList } from '@/api/serviceForm/types';
  import { Toast } from '@/utils';
  const emtis = defineEmits(['ok']);
  const userRoleVoList = ref<UserRoleVoList[]>([]);
  const uniPopupRef = ref<InstanceType<typeof uniPopup>>();
  const openShow = (list: UserRoleVoList[]) => {
    userRoleVoList.value = list;
    uniPopupRef.value.open('center');
  };
  const close = () => {
    uniPopupRef.value.close();
  };
  const currentRoleId = ref<number | undefined>();
  const isSelected = (id: number) => {
    return currentRoleId.value === id;
  };
  const choseRole = (roleId: number) => {
    currentRoleId.value = roleId;
  };
  const handleOk = () => {
    if (currentRoleId.value === void 0) {
      Toast('请选择填写身份');
      return;
    }
    emtis('ok', currentRoleId.value);
    close();
  };
  defineExpose({
    openShow,
  });
</script>
<style lang="scss" scoped>
  .container {
    .chose-role {
      background-color: white;
      border-radius: 32rpx;
      padding: 48rpx;
      padding-bottom: 32rpx;
      display: flex;
      flex-direction: column;
      .title {
        color: #333;
        text-align: center;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 48rpx;
        margin-bottom: 24rpx;
      }
      .desc {
        color: #969799;
        text-align: center;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
        margin-bottom: 32rpx;
      }
      .roles {
        display: flex;
        justify-content: center;
        gap: 16rpx;
        margin-bottom: 48rpx;
        .role-box {
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          width: 165rpx;
          height: 152rpx;
          padding: 24rpx 16rpx;
          justify-content: center;
          gap: 8rpx;
          align-items: center;
          background-color: #f7f8fa;
          border-radius: 16rpx;
          .name {
            font-size: 32rpx;
            line-height: 48rpx;
            color: #646566;
            font-weight: 700;
            line-height: 48rpx;
          }
          .icon-style {
            font-size: 48rpx;
            color: #646566;
          }
        }
      }
      .selectd-role-box {
        border: 1px solid #2878ff;
        background-color: #d0f7ff !important;
        .name {
          color: #2878ff !important;
        }
        .icon-style {
          color: #2878ff !important;
        }
      }
    }
  }
</style>
